<template>
  <div class="ma">
    <div class="box" :style="blockStyle">
      <div class="box-head" :style="headStyle">
        <div class="head-title">
          <i :class="data.content.icon" :style="headIconStyle" />
          <span :style="headTxtStyle">{{data.content.title}}</span>
          <div :style="headTimeStyle">
            <div class="load-time" :style="'color:' + data.color.time_text_color">
              <span>距开始：</span>
              <span class="time" :style="'color:' + data.color.time_num_color + ';background:' + data.color.time_bg_color">23</span>
              <span>小时</span>
              <span class="time" :style="'color:' + data.color.time_num_color + ';background:' + data.color.time_bg_color">59</span>
              <span>分</span>
              <span class="time" :style="'color:' + data.color.time_num_color + ';background:' + data.color.time_bg_color">59</span>
              <span>秒</span>
            </div>
          </div>
        </div>
      </div>
      <div class="box-content">
        <div :class="data.seckillType == 1 ? 'content' : 'content1'">
          <div class="content-item" :style="'background:' + data.color.commodity_bg" v-for="(item, i) in data.list.length > 0 ? data.list : list" :key="i">
            <div class="item-img">
              <vimage v-if="item.master" mode="widthFix" lazy-load :src="item.master" alt class="good-img" draggable="false"></vimage>
              <img v-else src="@/assets/images/goods_col2.png" alt class="good-img" draggable="false" />
            </div>
            <div class="item-txt">
              <template v-if="data.seckillType == 1">
                <div class="txt-title" :style="'color:' + data.color.commodity_title_color">
                  <div v-if="!data.showsell" class="group-label">3人团</div>
                  {{ item.name }}
                </div>
                <div class="txt-title2" v-if="data.seckillType == 2">{{ item.subtitle }}</div>
                <div class="label-sales" v-if="data.showsell">
                  <div class="group-label">3人团</div>
                  <span class="sales">已拼126件</span>
                </div>

                <div class="txt-price" :style="commodityPriceStyle">
                  {{ data.commodity_price_title }}
                  <span>￥{{ item.sell_price }}</span>
                </div>
                <div class="old-price" :style="oldPriceTitleStyle">{{ data.old_price_title }}￥{{ item.original_price }}</div>
                <div class="item-buttom" v-if="data.btns.show" :style="'color:'+data.btns.color+';background:'+data.btns.bg">{{data.btns.text}}</div>
              </template>

              <div id="" v-if="data.seckillType == 2">
                <div class="txt-title" :style="'color:' + data.color.commodity_title_color">
                  <div v-if="!data.showsell" class="group-label">3人团</div>
                  {{ item.name }}
                </div>
                <div class="txt-title2" v-if="data.seckillType == 2">{{ item.subtitle }}</div>
                <div class="label-sales" v-if="data.showsell">
                  <div class="group-label">3人团</div>
                  <span class="sales">已拼126件</span>
                </div>
              </div>
              <div class="" v-if="data.seckillType == 2">
                <div class="txt-price" :style="commodityPriceStyle">
                  {{ data.commodity_price_title }}
                  <span>￥{{ item.sell_price }}</span>
                </div>
                <div class="old-price" :style="oldPriceTitleStyle">{{ data.old_price_title }}￥{{ item.original_price }}</div>
                <div class="item-buttom" v-if="data.seckillType == 2&&data.btns.show" :style="'color:'+data.btns.color+';background:'+data.btns.bg">{{data.btns.text}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 5,
          type: 1,
          name: '这是一个商品名称',
          subtitle: '这是一个商品副名称',
          master: '',
          sell_price: '244.00',
          original_price: '500.00',
          sell: 0
        },
        {
          id: 15,
          type: 1,
          name: '这是一个商品名称',
          subtitle: '这是一个商品副名称',
          master: '',
          sell_price: '255.00',
          original_price: '500.00',
          sell: 0
        }
      ]
    };
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  computed: {
    blockStyle() {
      let s = 'margin:' + this.data.margin.top + 'px ' + this.data.margin.lr / 2 + 'px ' + this.data.margin.bottom + 'px;';
      s += 'border-radius:' + this.data.radius.template_radius + 'px;';
      s += 'background:' + this.data.color.bg + ';';
      s += 'color:' + this.data.color.left + ';';
      s += 'justify-content:' + this.data.posAlign + ';';
      return s;
    },
    headIconStyle() {
      return 'color:' + this.data.color.head_icon_color + ';';
    },
    headTxtStyle() {
      return 'color:' + this.data.color.head_txt_color + ';';
    },
    headStyle() {
      return 'background:' + this.data.color.head_bg + ';';
    },
    commodityStyle() {
      let s = 'margin:' + this.data.price_margin.top + 'px ' + this.data.price_margin.lr / 2 + 'px ' + this.data.price_margin.bottom + 'px;';
      s += 'background:' + this.data.color.commodity_bg + ';';
      return s;
    },
    headMoreStyle() {
      let s = 'display:' + this.data.showMore + ';';
      s += 'color:' + this.data.color.head_more_color + ';';
      return s;
    },
    commodityTitleStyle() {
      return 'color:' + this.data.color.commodity_title_color + ';';
    },
    commodityPriceStyle() {
      return 'color:' + this.data.color.commodity_price_color + ';';
    },
    priceTitleStyle() {
      let s = 'background:' + this.data.color.price_title_bg + ';';
      s += 'color:' + this.data.color.price_title_color + ';';
      return s;
    },
    oldPriceTitleStyle() {
      let s = 'display:' + this.data.showoldPrice + ';';
      s += 'color:' + this.data.color.old_price_title_color + ';';
      return s;
    },
    headTimeStyle() {
      return 'display:' + this.data.showTime + ';';
    },
    setTime() {
      let timer = this.data.timer;
      let nowtime = new Date().getTime();
      let start_time = Date.parse(timer[0]);
      let cha = start_time - nowtime;
      let timerArr = [];
      if (cha >= 0) {
        timerArr[0] = parseInt((cha % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        timerArr[1] = parseInt((cha % (1000 * 60 * 60)) / (1000 * 60));
        timerArr[2] = parseInt((cha % (1000 * 60)) / 1000);
      }
      return timerArr;
    }
  }
};
</script>

<style lang="scss" scoped>
.ma {
  width: 100%;
  .box {
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
    .box-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 10px;
      .head-title {
        font-size: 16px;
        margin-right: 5px;
        display: flex;
        align-items: center;
        span {
          line-height: 30px;
          font-weight: bold;
        }
        i {
          font-size: 22px;
          margin-right: 5px;
        }
      }
      .load-time {
        color: #fff;
        font-size: 12px;
        margin-left: 5px;

        .time {
          width: 16px;
          color: #fff;
          text-align: center;
          margin: 0px 2px;
          height: 16px;
          border-radius: 2px;
          display: inline-block;
          line-height: 16px;
        }
      }
      .head-more {
        font-size: 14px;
      }
    }
    .box-content {
      // min-height: 200px;
      padding: 0 5px;
      .content {
        overflow: auto;
        display: flex;
        width: 100%;
        // padding: 5px;
        .content-item {
          margin: 5px;
          width: 122px;
          // padding: 5px;
          border-radius: 5px;
          flex-shrink:0;
          // background: #fff;
          .item-img {
            height: 122px;
            border-radius: 3px;
            overflow: hidden;
            background: #e8e8e8;
            .good-img {
              width: 100%;
               height: 122px;
              display: block;
            }
          }
          .item-txt {
            font-size: 12px;
            padding: 5px;
            box-sizing: border-box;
            .txt-title {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              height: 40px;
              line-height: 20px;
            }
            .group-label {
              background: #ff3c29;
              color: #fff;
              padding: 1px 1px;
              border-radius: 3px;
              margin-right: 5px;
              font-size: 12px;
              display: inline-block;
              line-height: 1;
            }
            .label-sales {
              margin-bottom: 5px;
              display: flex;
              align-items: center;
              color: #ff3c29;
              font-size: 14px;

              .sales {
                color: #ff9900;
                font-size: 12px;
              }
            }
            .txt-price {
              display: flex;
              align-items: center;

              color: #ff3c29;
              font-size: 12px;
              div {
                background: #ff3c29;
                color: #fff;
                padding: 1px 1px;
                border-radius: 3px;
                margin-right: 5px;
                font-size: 12px;
              }
              span {
                font-weight: bold;
              }
            }
            .old-price {
              margin-top: 5px;
              color: #666;
              font-size: 12px;
            }
          }
        }
        .item-buttom {
          padding: 5px 15px;
          font-size: 12px;
          background: #ff3c29;
          border-radius: 30px;
          color: #fff;
          text-align: center;
          margin-top: 5px;
        }
      }
      .content1 {
        width: 100%;
        padding: 0px 10px;
        .content-item {
          padding: 5px;
          border-radius: 5px;
          display: flex;
          margin: 10px 0px;
          position: relative;
          .item-img {
            width: 115px;
            height: 115px;
            border-radius: 3px;
            overflow: hidden;
            background: #e8e8e8;
            .good-img {
              width: 100%;
              display: block;
            }
          }
          .item-txt {
            margin-left: 10px;
            font-size: 14px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            .txt-title {
              font-size: 16px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              height: 40px;
              line-height: 20px;
            }
            .group-label {
              background: #ff3c29;
              color: #fff;
              padding: 1px 1px;
              border-radius: 3px;
              margin-right: 5px;
              font-size: 12px;
              display: inline-block;
              line-height: 1;
            }
            .label-sales {
              margin-bottom: 5px;
              display: flex;
              align-items: center;
              color: #ff3c29;
              font-size: 14px;

              .sales {
                color: #ff9900;
                font-size: 12px;
              }
            }
            .txt-title2 {
              margin: 5px 0px;
              font-size: 12px;
              color: #999;
            }
            .txt-price {
              display: flex;
              align-items: center;
              font-weight: bold;
              color: #ff3c29;
              font-size: 14px;
              div {
                background: #ff3c29;
                color: #fff;
                padding: 1px 1px;
                border-radius: 3px;
                margin-right: 5px;
                font-size: 12px;
              }
            }
            .old-price {
              margin-top: 5px;
              color: #666;
              font-size: 12px;
              text-decoration: line-through;
            }
          }
          .item-buttom {
            padding: 5px 15px;
            font-size: 12px;
            background: #ff3c29;
            border-radius: 30px;
            color: #fff;
            position: absolute;
            bottom: 10px;
            right: 10px;
          }
        }
      }
    }
  }
}
</style>
